【Node之web通信Socket.IO】

环境：Node v8.2.1; Npm v5.3.0; OS Windows10

在web开发中，我们使用HTTP协议，HTTP协议是基于文本的“单向”通讯机制，当我们想要从服务端获取数据的时候目前首选当然是Ajax，Ajax无疑是动态Web页面的一个重大发展，他不再需要我们即使更新一点内容，也需要刷新整个页面了，但是当我们在服务端将数据推送到客户端的时候，Ajax就显得力不从心了。如果我们使用Socket构建一个双向的机制，那么服务端向客户端推送数据也就简单了。

1、Socket.IO简介

Socket.IO是Node.js的一个模块，他提供通过WebSocket进行通信的一种简单方式，WebSocket协议很复杂，但是Socket.IO提供了服务器和客户端双方的组件，所以只需要一个模块就可以给应用程序加入对WebSocket的支持。而且还能支持不同的浏览器。
【API手册】

2、一些例子

2.1 基础应用

server.js

const http = require("http"),
    io = require("socket.io");
    
const server = http.createServer((req, res) => {
    res.end();
}).listen(3000);

// 交由 Socket.io 接管 
const socket=io.listen(server);

// 客户端socket连接时
socket.on("connection",client=>{
    console.log("web connected");
})

上面代码中，当客户端连接时，服务端会同时触发两个事件：server.onRequest 和 Socket.onConnection。它们之间有什么区别呢？区别在于 Socket 的是持久性的。

index.html

<script src="./socket.io.js"></script>
<script>
    var socket = io.connect("http://127.0.0.1:3000");
</script>

上面代码中，我们先执行server.js，然后再浏览器中访问index.html的时候控制台会打印"web connected"

2.2 向客户端推送数据

server.js

const http = require("http"),
    io = require("socket.io");
    
const server = http.createServer((req, res) => {
    res.end();
}).listen(3000);

const socket = io.listen(server);

socket.on("connection", client => {
    client.send("welcome")
})

上面服务端代码，在有客户端socket成功连接之后会向客户端推送一个“welcome”。

index.html

<script src="./socket.io.js"></script>
<script>
    var socket = io.connect("http://127.0.0.1:3000");
    socket.on("message", data => console.log(data));
    //收到消息“welcome”
</script>

2.3 广播消息

上面是对单个客户端的消息推送，当我们有客户端连接的时候如果我们想对所有正在连接的客户端发送消息的时候，也就是广播消息。Socket.IO中提供了API可以很简单的实现广播

server.js

const http = require("http"),
    io = require("socket.io");
    
const server = http.createServer((req, res) => {
    res.end();
}).listen(3000);

const socket = io.listen(server);

socket.on("connection", client => {
    //广播消息
    client.broadcast.send("新用户上线了");
})

【注意！！】这儿的广播消息不会广播自己

2.4 多个Socket连接

上面的例子中都是一个页面只有一个Socket的连接，这儿列举一个多Socket连接的例子

server.js

const http = require("http"),
    io = require("socket.io");

const server = http.createServer((req, res) => {
    res.end();
}).listen(3000);

const socket = io.listen(server);

//针对特定的socket连接
socket.of("/hello").on("connection",client=>{
    client.send("hello")
})

socket.of("/msg").on("connection",client=>{
    client.send("msg")
})

index.html

<script src="./socket.io.js"></script>
<script>
    var hello = io.connect("http://127.0.0.1:3000/hello");
    var msg = io.connect("http://127.0.0.1:3000/msg");
    hello.on("message", data => console.log(data));
    msg.on("message", data => console.log(data))
</script>

上面代码中在一个页面中建立了两个WebSocket连接

---

END